<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="common/commonVant::commonStaticVant"></div>
    <script th:src="@{/common/localStorage.js}"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" v-cloak>
    <van-nav-bar
            title="标题"
            left-arrow
            @click-left="locationLeft"
    ></van-nav-bar>
    <van-skeleton title avatar :row="3" :loading="loading">
        <div class="profile_header">
            <div class="profile_act">
                <van-image width="80" height="80" :src="picture" round class="profile_img"/>
            </div>
            <div class="profile_detail">
                <div>
                    <p><span>{{username}}</span></p>
                    <p class="introduce"><span>自我介绍：<span></span>{{introduce}}</span></p>
                </div>
            </div>
        </div>
    </van-skeleton>
    <van-cell-group>
        <van-cell title="个人信息" value="" is-link/>
    </van-cell-group>
    <van-cell-group>
        <van-cell title="发表文章" url="/home/pushArticle" value="" is-link/>
    </van-cell-group>
    <van-cell-group>
        <van-cell title="我的文章" value="" url="/home/myArticle" is-link/>
    </van-cell-group>
    <van-cell-group>
        <van-cell title="参与话题" value="" is-link/>
    </van-cell-group>
    <van-cell-group>
        <van-cell title="点赞话题" value="" is-link url="/home/myStared"/>
    </van-cell-group>
    <van-cell-group>
        <van-cell title="收藏话题" url="/home/myCollection" value="" is-link/>
    </van-cell-group>
    <van-cell-group v-if="token">
        <van-cell title="退出登录" value="" @click="logout" is-link/>
    </van-cell-group>
    <van-cell-group v-if="!token">
        <van-cell title="登陆" value='' url="/home/login" is-link/>
    </van-cell-group>
    <van-tabbar v-model="active">
        <van-tabbar-item name="Community" icon="home-o" url="/home">社区</van-tabbar-item>
        <van-tabbar-item name="More" icon="friends-o" badge="5" url="https://personalclub.club/">全部</van-tabbar-item>
        <van-tabbar-item name="Profile" icon="setting-o" badge="20">我的</van-tabbar-item>
    </van-tabbar>
</div>
<script th:inline="javascript">
    let mv = new Vue({
        el: "#app",
        data: {
            list: [],
            value: '',
            active: 'Profile',
            token: '',
            userInfo: [],
            loading: true,
            picture: '',
            introduce: '',
            username: ''
        },
        methods: {
            async selectUserInfo() {
                const result = await httpPost("/user/selectUserInfo", {}, {'Authorization': this.token});
                if (result.code == 200) {
                    this.userInfo = result.data;
                    this.picture = result.data[0].picture;
                    this.introduce = result.data[0].introduce;
                    this.username = result.data[0].username;
                    this.loading = false;
                } else {
                    this.loading = true;
                }
            },
            locationLeft() {
                window.history.go(-1);
            },
            logout() {
                vant.Dialog.confirm({
                    title: '退出登陆',
                    message: '确定要退出登录嘛？',
                }).then(() => {
                    window.removeLocalStorage('token');
                    this.token = window.getLocalStorage('token');
                    this.selectUserInfo();
                });
            }
        },
        mounted() {
            this.token = window.getLocalStorage("token");
            this.token = this.token ? this.token : '';
            if (!this.token) {
                this.token = '';
                vant.Dialog.confirm({
                    title: '确认登陆',
                    message: '检测到您没有登陆，某些栏目无法操作，是否马上登陆？',
                }).then(() => {
                    window.location.href = [[${#request.getContextPath()}]] + '/home/login';
                });
            } else {
                this.selectUserInfo();
            }

        }
    })
</script>
</body>
<style>
    .profile_header {
        height: 150px;
        background: #1989fa;
        opacity: 0.7;
        display: flex;
    }

    .profile_act {
        display: flex;
        width: 30%;
        align-items: center;
        justify-content: center;
    }

    .profile_img {
        line-height: 150px;
        text-align: center;
    }

    .profile_detail {
        width: 70%;
        display: flex;
        align-items: center;
    }

    .introduce {
        margin-top: 5px;
    }
</style>
</html>